<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内边距和外边距</title>
		<style type="text/css">
			#div1 {
				width: 300px;
				height: 300px;
				background-color: #00FFFF;
				border: solid 1px red;
				/* 内补丁 */
				padding-left: 20px;
			}
			#div2 {
				width: 100px;
				height: 100px;
				background-color: black;
				border: solid 1px red;
				/* 在div2这个节点顶部top打一个补丁，这个补丁离top 10px */
				/* 外补丁 */
				margin-top : 10px;
			}
		</style>
	</head>
	<body>
		
		<!-- 盒子套盒子 -->
		<!-- 如果盒子套盒子，需要定位的话，可以使用外补丁和内补丁。 -->
		<div id="div1">
			<div id="div2">
				
			</div>
		</div>
		
	</body>
</html>
